<template>
	<div
		style="display: flex;align-items: flex-start;flex-direction: row;padding-top: 5px;padding-bottom: 5px;background-color: #FFFFFF;">
		<div style="font-size: 12px;color: #999999;flex: 1;">{{keystr}}</div>
		<div style="display: flex;align-items: center;flex: 2;">
			<div :style="vstyle">{{valuestr}}</div>
			<div v-if="tagstr != undefined"
				style="margin-left: 12px;padding: 2px 10px;background-color: #007AFF30;display: flex;justify-content: center;align-items: center;border-radius: 15px;overflow: hidden;">
				<div style="font-size: 12px;color: #007AFF;">{{tagstr}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ["keystr", "valuestr", "tagstr", "valuestyle"],
		name: "form-key-file-row",
		data() {
			return {
				vstyle: this.valuestyle
			};
		},
		mounted() {
			let style = {
				"fontSize": "12px",
				"marginRight": "5px",
				"color": "#333333",
					...this.vstyle
			}
			this.vstyle = style;
		}
	}
</script>

<style>

</style>
